iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
Modern Web

重新認識 FrontEnd系列 第 28

Day28:TypeScript 泛型與繼承

  • 分享至 

  • xImage
  •  

在 TypeScript 中,泛型和繼承是兩個強大的特性,能夠幫助我們編寫更加靈活、可重用且類型安全的代碼。讓我們來開始認識他吧

泛型

泛型允許我們在定義函數、接口或類時,不預先指定具體的類型,而在使用時再指定類型的一種特性,先從一個基本的範例講起

function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("myString");
let output2 = identity<number>(100);

在此範例中 T 可以是任何類型,並且類別也可以是泛型

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

繼承

繼承的概念很簡單,我們可以從一個比較空泛的主題開始往下逐漸增長,像是一個生命 => 一個動物 => 一隻狗

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog("Buddy");
dog.bark();
dog.move(10);

當然,每個類別可能會有細微的差距,我們可以在內部覆寫掉原先的內容

class Snake extends Animal {
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

以上為一些泛型和繼承的基本介紹,明天將會介紹另一個重要的功能:多型


上一篇
Day27:TypeScript 的 type 和 interface
下一篇
Day29:TypeScript 多型
系列文
重新認識 FrontEnd30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言